<template>
  <div class="rotation">
    <!-- 轮播图 -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide
        class="swiper-slide"
        v-for="(rota, index) in fastList"
        :key="rota.id"
      >
        <router-link
          tag="div"
          :to="{
            path:'/productlist',
           
            query:{
               id:rota.id,
              titles:rota.cate_name
            }
          }"
        >
          <img class="imgrota" :src="rota.pic" />
          <span
            :class="[
              'textrota',
              { green: 'green' },
              { orange: index % 3 == 2 },
              { blue: index % 3 == 1 },
            ]"
            >{{ rota.cate_name }}</span>
        </router-link>
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  props: {
    fastList: Array,
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 10,
        freeMode: true,
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // }
      },
    };
  },

  created() {
    // console.log("快速选择=> ", this.fastList);
  },

  mounted() {},
};
</script>

<style lang="less" scoped>
.rotation {
  width: 375px;
  margin: 20px auto;
  padding: 0px 15px;
  overflow: hidden;
  box-sizing: border-box;
  // .swiper {
  // }
}
.swiper-slide {
  width: 90px;

  .imgrota {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 5px 5px 0px 0px;
  }
  .textrota {
    display: block;
    text-align: center;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    &.green {
      border-bottom: 2.5px solid #06d606da;
    }
    &.orange {
      border-bottom: 2.5px solid #ff6600;
    }
    &.blue {
      border-bottom: 2.5px solid #00c3fffb;
    }
  }
}
</style>